<template>
    <div id="admindetail">
        <el-form ref="form" :disabled='isdisabled' :rules='rules' :model="form" label-width="80px">
            <el-form-item label="角色" prop='roleId'>
                <el-select style="width: 100%" v-model="form.roleId" placeholder="请选择">
                  <el-option v-for="role in roles" :key="role.id" :label="role.name" :value="role.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-for="(item, index) in formList" :key='index' :prop='item.prop' :label="item.label">
                <el-input v-model="form[item.prop]"></el-input>
            </el-form-item>
        </el-form>
        <div class="btns">
            <el-button @click="onSubmit" v-if="!isdisabled" type='primary'>提交</el-button>
            <el-button @click="changeInfo" v-else type='primary'>修改</el-button>
            <el-button @click="goback" type='primary'>取消</el-button>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
     
      return {
        form: {
          userName: '', fullName: '', password: '', roleId: ''
        },
        formList: [
            {prop: 'userName', label: '用户名'},{prop: 'fullName', label: '姓名'},{prop: 'password', label: '密码'},
            {prop: 'phone', label: '手机号码'},{prop: 'email', label: '电子邮箱'},
        ],
        isdisabled: this.$route.query.mode == 'view' ? true : false,
        roles: [],
        rules: {
          roleId: [
            { required: true, message: '请选择角色', trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          fullName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '请输入6至18位的数字字母', trigger: 'blur' }
          ],
          phone: [
            {min: 11, max: 11, message: '请输入11位有效手机号', trigger: 'blur' }
          ],
        }
      }
    },
    mounted() {
      this.getRoleList()
      if(this.$route.query.mode == 'view') {
        this.getAdminInfo()
      }
    },
    methods: {
      onSubmit() {
        if(this.$route.query.mode == 'view') {
           this.$confirm('是否继续提交修改?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                    let param = Object.assign(this.form)
                    
                    this.$api.apiEditAdminDetail(param, res => {
                      this.$message({
                        type: 'success',
                        message: '修改成功'
                      })
                      this.$router.go(-1)
                    })
              }).catch(() => {
                  return;
              });
      
        } else {
          let param = Object.assign(this.form)
          if(param.userName === '' || param.fullName === '' || param.password === '', param.roleId === '') {
              this.$message({
                type: 'warning',
                message: '请填写完整'
              })
              return
          }
          debugger
          this.$api.apiAddAdmin(param, res => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.$router.go(-1)
          })
        }
        
      },
      getAdminInfo() {
          let param = {
            id: this.$route.query.id
          }
          this.$api.apiViewAdminDetail(param, res => {
              this.form = res.data
          })
      },
      changeInfo() {
        // 修改信息
        this.isdisabled = false
      },
      getRoleList() {
        this.$api.apiGetRoleList({}, res => {
          this.roles = res.data
        })
      },
      goback() {
          this.$router.go(-1)
      }
    }
  }
</script>
<style lang="scss">
#admindetail {
  width: 60%;
  margin: 30px auto;
  .btns {
    text-align: center
  }
}

</style>
